<template>
	<view class="baseForm">
		<u-loading-page :loading="loading"></u-loading-page>
		<view v-if="!loading" class="overhidden">
			<view>
				<!-- 选择设备 -->
				<view v-if="props.isRead != 1" class="searchScan">
					<u-input placeholder="请选择设备或扫描设备码" disabled>
						<template #suffix>
							<u-icon name="scan" size="27px" :bold="false" @click="scanHandle"></u-icon>
						</template>
					</u-input>
					<u-button class="addBtn1" size="small" type="primary" text="选择"
						@click="jump('/eam/equ/selectDevice/index')"></u-button>
				</view>
				<!-- 设备详情 -->
				<DeviceInfoTemplate :taskInfo="taskInfo"></DeviceInfoTemplate>
				<view class="plan card record-content" style="margin-bottom: 70px">
					<view v-show="
							!taskInfo?.details || taskInfo?.details.length === 0
						" class="flex justify-start grey-color" style="margin: 12px 0 10px">
						暂无点检信息
					</view>

					<view class="overhidden" v-for="(item, index) in taskInfo?.details" :key="index">
						<view>
							<view class="record-content">
								<view class="record-item">
									<view class="title_new">
										<text class="require_icon" v-if="item?.sopItem.sopExecute == '1'">*</text>
										{{ item?.sopItemName || "" }}
										<u-icon
											v-if="item?.sopItem.sopItemMethod || item?.sopItem.sopItemStandardValue || item?.sopItem.sopItemTool || item?.sopItem.sopItemPosition"
											name="info-circle-fill" color="rgb(192, 196, 204)" size="18" @click="
																				openInfoModal(
																					item.sopItem
																				)
																			"></u-icon>
									</view>
									<view class="" v-if="item.sopItem.standardValue == 1"
										style="max-width: 100px;min-width: 70px;">
										<u--input v-if="props.isRead == 0" v-model="item.sopItemValue" placeholder="请输入"
											class="minInput" :class="
																				sizeColorHandle(
																					item.sopItemValue,
																					item?.sopItem.standardMinValue,
																					item?.sopItem.standardMaxValue
																				)
																			" inputAlign="right" clearable border="none"></u--input>
										<text v-else :class="
																				sizeColorHandle(
																					item.sopItemValue,
																					item?.sopItem.standardMinValue,
																					item?.sopItem.standardMaxValue
																				)
																			" style="text-align: right;" class="text-span-flex-end">
											{{ item.sopItemValue || "" }}
										</text>
									</view>
									<view class="" v-if="item.sopItem.standardValue == 2"
										style="max-width: 100px;min-width: 70px;">
										<view v-if="props.isRead == 0 || props.isRead == 5" class="flex input-box"
											style="justify-content: flex-end;">
											<view class="minInput"
												:class="sizeColorHandle1(item.sopItemValueId, item.sopItem.details ?? [])"
												@click.stop="hideKeyboard(index, item.sopItem.details ?? [])">
												<view class="">
													{{ item.sopItemValue? item.sopItemValue:'' }}
												</view>
												<view class="" style="color:#c0c4cc">
													{{ item.sopItemValue? '':'请选择' }}
												</view>
											</view>
											<image @click.stop="clearData(index)" v-if="item.sopItemValueId!==''"
												src="@/static/image/delete.png" class="deleteIcon" />
										</view>
										<text v-else
											:class="sizeColorHandle1(item.sopItemValueId, item.sopItem.details ?? [])"  class="text-span-flex-end">
											{{ item.sopItemValue || '' }}
										</text>
									</view>
								</view>
								<!-- <view class="record-item" v-if="item.sopItem.standardValue == 1 && !(!item.sopItem.standardMinValue && !item.sopItem.standardMaxValue)">
												<text>上下限值</text>
												<text v-if="item?.sopItem.standardMinValue !== item?.sopItem.standardMaxValue">
													{{ item?.sopItem.standardMinValue || '' }}-{{ item?.sopItem.standardMaxValue || '' }}{{ item?.standardValueUnit || '' }}
												</text>
												<text v-else>{{ item?.sopItem.standardMinValue || '' }}{{ item?.sopItem.standardValueUnit || '' }}</text>
											</view> -->
								<view class="record-item" v-if="item.sopItemStandard">
									<text>标准要求</text>
									<text>{{ item.sopItemStandard }}</text>
								</view>
								<!-- <view
									class="record-item"
									v-if="item.sopItem.standardValue == 1">
									<view class="flex">
										实际值
										<text
											class="require_icon"
											v-if="
												item?.sopItem.sopExecute == '1'
											">
											*
										</text>
									</view>
									<u--input
										v-if="props.isRead == 0"
										v-model="item.sopItemValue"
										placeholder="请输入"
										class="minInput"
										:class="
											sizeColorHandle(
												item.sopItemValue,
												item?.sopItem.standardMinValue,
												item?.sopItem.standardMaxValue
											)
										"
										inputAlign="right"
										clearable
										border="none"></u--input>
									<text
										v-else
										:class="
											sizeColorHandle(
												item.sopItemValue,
												item?.sopItem.standardMinValue,
												item?.sopItem.standardMaxValue
											)
										">
										{{ item.sopItemValue || "" }}
									</text>
								</view>
								<view
									class="record-item"
									v-if="item.sopItem.standardValue == 2">
									<view class="flex">
										实际值
										<text
											class="require_icon"
											v-if="
												item?.sopItem.sopExecute == '1'
											">
											*
										</text>
									</view>
									<view
										v-if="props.isRead == 0"
										@click="
											hideKeyboard(
												index,
												item.sopItem.details ?? []
											)
										"
										class="flex input-box">
										<u--input
											v-model="item.sopItemValue"
											border="none"
											placeholder="请选择"
											readonly
											class="minInput"
											:class="
												sizeColorHandle1(
													item.sopItemValueId,
													item.sopItem.details ?? []
												)
											"></u--input>
										<image
											@click.stop="clearData(index)"
											v-show="item.sopItemValueId"
											src="@/static/image/delete.png"
											class="deleteIcon" />
									</view>
									<text
										v-else
										:class="
											sizeColorHandle1(
												item.sopItemValueId,
												item.sopItem.details ?? []
											)
										">
										{{ item.sopItemValue || "" }}
									</text>
								</view>
							 -->
							</view>

							<!-- 待需要上传图片后启用 -->
							<view class="mt-8 flex" v-if="item.sopItem.sopImage == '1'">
								<upload-image :multiple="false" :key="index" :keys="index" @fileChange="
										(list) => getImages(list, index)
									" :list="item.images ?? []" :capture="capture" :isRead="
										props.isRead == 1 ? true : false
									"></upload-image>
							</view>
						</view>
						<u-divider v-show="
								index + 1 !== taskInfo?.details.length
							"></u-divider>
					</view>

					<!-- 查看页面并且没有现场图片则不展示 -->
					<!-- <view>
									<view class="title flex justify-between">
										<text class="mt-4">现场图片</text>
									</view>
				
									<view class="mt-8">
										<view class="mt-8 flex">
											<upload-image :multiple="false" :keys="4545" @fileChange="getSceneImages" :list="taskInfo.images ?? []" :capture="capture"></upload-image>
										</view>
									</view>
								</view> -->
				</view>
				<!-- new 增加问题描述 problemDesc-->
				<view class="detail card" v-if="props.isRead == 0" style="margin-top: -60px">
					<view class="flex flex-col justify-between flex-1 h-full">
						<view class="record-content">
							<view class="flex title justify-between" style="margin: 6px 0 !important">
								<text>问题描述</text>
							</view>
						</view>
						<view class="record-item">
							<u--textarea v-model="taskInfo.problemDesc" placeholder="请输入" class="minTextarea"
								inputAlign="right" clearable border="none" maxlength="250" autoHeight
								height="auto"></u--textarea>
						</view>
					</view>
				</view>
				<view class="detail card" style="margin-top: -60px" v-if="props.isRead == 1 && taskInfo.problemDesc">
					<view class="flex flex-col justify-between flex-1 h-full">
						<view class="record-content">
							<view class="flex title justify-between" style="margin: 6px 0 !important">
								<text>问题描述</text>
							</view>
						</view>
						<view class="record-item">
							<view class="font-14" style="word-break: break-all;">
								{{ taskInfo.problemDesc || "" }}
							</view>
						</view>
					</view>
				</view>
				<!-- 提交 -->
				<view v-if="props.isRead == 0" class="submit_btn_div">
					<button type="default" class="grey_btn" :disabled="saveLoading" :loading="saveLoading"
						@click="saveSubmit">
						保 存
					</button>
					<button type="primary" :disabled="postLoading" :loading="postLoading" @click="submit"
						class="submit_btn">
						提 交
					</button>
				</view>
			</view>
			<!-- 实际值选择picker -->
			<u-picker :show="showPicker" :columns="currentColumns" :defaultIndex="defaultIndex" keyName="text"
				immediateChange @cancel="showPicker = false" @confirm="changeData"></u-picker>
			<u-modal :show="showInfo" :content="contentInfo" @confirm="showInfo = false"></u-modal>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { nextTick, ref, toRefs, watch, reactive, computed, toRaw } from "vue";
	import { onShow, onLoad, onPullDownRefresh, onLaunch } from "@dcloudio/uni-app";
	import UploadImage from "@/components/upload-image-ssr.vue";
	import DeviceInfoTemplate from "@/pages/eam/equ/pointInspection/components/pointDeviceInfo.vue";
	import { toScanCode } from "@/components/hs-scancode/scan.js";
	import { http } from "@/utils/http";

	import { useEamStore } from "@/stores/useEamStore";

	import { sizeColorHandle1, sizeColorHandle } from "@/utils/common";

	const props = defineProps({
		id: {
			type: String,
			default: "",
		},
		isRead: {
			type: String,
			default: "0", // 1是查看
		},
		assetKind: {
			type: String,
			default: "", // 1是查看
		},
		sopStandardId: {
			type: String,
			default: "",
		},
	});
	const { sopStandardId, assetKind } = toRefs(props);
	// 初始化页面，获取检查详情
	let taskInfo = reactive({
		locationName: "",
		assetCode: "",
		assetId: "",
		assetKind: props.assetKind,
		assetName: "",
		checkPersonId: "",
		checkPersonName: "",
		checkResult: "",
		createTime: "",
		createdUserId: "",
		createdUserName: "",
		deleted: "",
		details: [],
		exceptionNumber: "",
		executePersonId: "",
		executePersonName: "",
		id: "",

		inspectionTaskId: "",
		problemDesc: "",
		lastUpdateTime: "",
		lastUpdatedUserId: "",
		lastUpdatedUserName: "",
		notInspectedNumber: "",
		orderNo: "",
		orderStatus: 0,
		planId: "",
		planName: "",
		planNo: "",
		planTime: "",
		remarks: "",
		sopStandardCode: "",
		sopStandardId: "",
		sopStandardName: "",
		sopTypeCode: "",
		sopTypeId: "",
		sopTypeName: "",
		version: "",
		workTime: "",
	});

	// 作业方法提示框
	const showInfo = ref(false);
	const contentInfo = ref("");
	function openInfoModal(data) {
		showInfo.value = true;
		contentInfo.value = `作业方法：${data}`;
	}

	onLoad(() => {
		props.id && initPage();
	});
	/**
	 * 选择实际值
	 */
	const showPicker = ref(false);
	const currentColumns = reactive([[]]);
	const currentIndex = ref();
	const defaultIndex = ref([0]);

	/**
	 * 组织键盘弹出
	 */
	function hideKeyboard(index, list) {
		const lists = JSON.parse(JSON.stringify(list));
		lists.forEach((item) => {
			console.log("item", item);
			item.text = `${item.standardValue} - ${item.resultValue == "1" ? "正常" : "异常"
				}`;
		});
		currentIndex.value = index;
		currentColumns[0] = lists ?? [];
		// 给原有的值,赋值picker默认index
		const sopItemValueId = taskInfo.details[index].sopItemValueId;
		if (sopItemValueId) {
			const currentIndex = list.findIndex(
				(self) => self.id === sopItemValueId
			);
			defaultIndex.value = [currentIndex];
		} else {
			defaultIndex.value = [0];
		}
		showPicker.value = true;
		uni.hideKeyboard();
	}
	function clearData(index) {
		taskInfo.details[index].sopItemValueId = "";
		taskInfo.details[index].sopItemValue = "";
		showPicker.value = false;
	}
	function changeData(e) {
		console.log("e", e.value[0]);
		taskInfo.details[currentIndex.value].sopItemValue =
			e.value[0].standardValue;
		taskInfo.details[currentIndex.value].sopItemValueId = e.value[0].id;
		showPicker.value = false;
	}

	// 表单详情
	let formData = reactive({
		consumeCode: "",
	});

	// 初始化页面，获取检查详情
	// let taskInfo = ref<any>({});
	const loading = ref(false);

	// 表单规则定义
	const rules = ref({});

	// 摄像头参数设置
	const capture = ref(["camera", "album"]);
	// 获取图片
	function getImages(list, index) {
		const current = JSON.parse(JSON.stringify(taskInfo.details))[index];
		current.images = [];
		list?.forEach((item) => {
			current.images.push(item);
		});
		const elder = JSON.parse(JSON.stringify(taskInfo.details));
		elder[index] = current;
		taskInfo.details = elder;
	}

	// 获取现场图片
	function getSceneImages(list) {
		taskInfo.images = list;
	}

	// form信息重置
	function resetData() {
		formData.consumeCode = "";
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 100,
		});
	}

	// 重置表单信息 & 光标自动blur
	const scanBarRef = ref();
	const datekey = ref(new Date());
	function resetFields() {
		resetData();
		scanBarRef.value.reset();
		datekey.value = new Date();
	}

	// 校验提交
	const uForm = ref();

	// 保存
	const saveLoading = ref(false);
	async function saveSubmit() {
		// 校验是否录入工装编号成功
		console.log(toRaw(taskInfo));
		if (!taskInfo.assetId) {
			uni.showToast({
				title: "点检设备不能为空",
				icon: "none",
			});
			return false;
		}

		// 校验判断数字
		for (let i = 0; i < taskInfo.details.length; i++) {
			if (taskInfo.details[i].sopItem.standardValue == "1") {
				if (isNaN(Number(taskInfo.details[i].sopItemValue))) {
					uni.showToast({
						title: `${taskInfo.details[i].sopItemName}的实际值只能为数字`,
						icon: "none",
					});
					return false;
				}
			}
		}
		// save提交
		saveLoading.value = true;
		const result : any = await http({
			method: "POST",
			url: `/eam/equPointInspectionOrder/save `,
			data: toRaw(taskInfo),
		}).catch(() => {
			saveLoading.value = false;
		});
		if (result?.code == 200) {
			uni.showToast({
				title: "保存成功",
			});
			uni.navigateTo({
				url: `/pages/eam/equ/pointInspection/components/inspectionChecklist?sopStandardId=${props.sopStandardId}`,
			});
		}
		saveLoading.value = false;
	}

	// 提交
	const postLoading = ref(false);
	async function submit() {
		console.log(taskInfo);
		// 校验是否录入工装编号成功
		if (!taskInfo.id) {
			uni.showToast({
				title: "任务id不能为空",
				icon: "none",
			});
			return false;
		}
		// 校验必填项是否填写
		const infos = taskInfo?.details ?? [];
		if (infos.length) {
			for (let i = 0; i < infos.length; i++) {
				if (infos[i].sopItem.sopExecute == "1" && !infos[i].sopItemValue) {
					uni.showToast({
						title: `${infos[i].sopItemName}的实际值不能为空`,
						icon: "none",
					});
					return false;
				}
			}
		}
		// 校验判断数字
		for (let i = 0; i < taskInfo.details.length; i++) {
			if (taskInfo.details[i].sopItem.standardValue == "1") {
				if (isNaN(Number(taskInfo.details[i].sopItemValue))) {
					uni.showToast({
						title: `${taskInfo.details[i].sopItemName}的实际值只能为数字`,
						icon: "none",
					});
					return false;
				}
			}
		}
		// save提交
		postLoading.value = true;
		const result : any = await http({
			method: "POST",
			url: `/eam/equPointInspectionOrder/submit`,
			data: toRaw(taskInfo),
		}).catch(() => {
			postLoading.value = false;
		});
		if (result?.code == 200) {
			uni.showToast({
				title: "提交成功",
			});
			uni.navigateTo({
				url: `/pages/eam/equ/pointInspection/components/inspectionChecklist?sopStandardId=${props.sopStandardId}`,
			});
		}
		postLoading.value = false;
	}

	// 获取工装信息（接口请求）
	async function getDeviceInfos() {
		loading.value = true;
		const data : any = await http({
			method: "GET",
			url: `/eam/equPrecisionCheck/get/${props.id}`,
			data: {},
		}).catch(() => {
			loading.value = false;
		});
		if (data?.data) {
			taskInfo.value = data?.data;
		}
		loading.value = false;
		// 模拟数据返回，调试使用（保留）
		// setTimeout(() => {
		// 	loading.value = false;
		// 	taskInfo.value = JSON.parse(JSON.stringify(mockData));
		// }, 500);
	}

	async function initPage() {
		try {
			loading.value = true;
			const result : any = await http({
				method: "GET",
				url: `/eam/equPointInspectionOrder/get/${props.id}`,
				data: {},
			}).finally(() => {
				uni.stopPullDownRefresh();
			});
			taskInfo = Object.assign(taskInfo, {
				...result.data,
				images: result.data.images || [],
				executeFiles: result.data.executeFiles || [],
				parts: result.data.parts || [],
			});
			loading.value = false;
		} catch (e) {
			console.log(e);
		}
	}

	// 页面刷新
	function refresh() {
		props.id && initPage();
	}

	// 下拉加载
	onPullDownRefresh(() => {
		uni.showToast({
			title: "onPullDownRefresh",
		});
		refresh();
	});

	// 页面显示回调
	refresh();
	// 网页跳转
	function jump(item, id = "") {
		uni.navigateTo({
			url: id ? `/pages${item}?id=${id}` : `/pages${item}`,
			fail: () => {
				uni.showToast({
					title: "敬请期待",
					icon: "error",
				});
			},
		});
	}
	// 过滤设备信息
	function filterDeviceInfo(data) {
		taskInfo.assetId = data.id;
		taskInfo.assetCode = data.assetCode;
		taskInfo.assetName = data.assetName;
		taskInfo.locationName = data.locationName;
		taskInfo.assetTypeName = data.assetTypeName;
		taskInfo.usingDepartmentName = data.usingDepartmentName;
		taskInfo.usingPersonName = data.usingPersonName;
		if (data.assetModelNo && data.assetBrandName) {
			taskInfo.assetModelNo = `${data.assetModelNo}-${data.assetBrandName}`;
		} else if (data.assetModelNo && !data.assetBrandName) {
			taskInfo.assetModelNo = `${data.assetModelNo}`;
		} else if (!data.assetModelNo && data.assetBrandName) {
			taskInfo.assetModelNo = `${data.assetBrandName}`;
		}
	}
	// 获取设备信息（接口请求）
	async function getDeviceInfo(assetCode : string) {
		const { data } : any = await http({
			method: "GET",
			url: `/eam/equAssetInfo/getInfo/${assetCode}`,
			data: {},
		});
		filterDeviceInfo(data);
	}
	// 选择设备信息
	const deviceList = computed(() => JSON.parse(useEamStore().deviceList));
	// 监控设备选择id
	watch(
		() => deviceList,
		async (newVal) => {
			if (newVal.value[0]?.id) {
				taskInfo.assetId = newVal.value[0]?.id;
				filterDeviceInfo(newVal.value[0]);
			}
			setTimeout(() => {
				useEamStore().setDeviceList();
			}, 1000);
		},
		{
			deep: true,
			immediate: true,
		}
	);

	// 点击扫码
	const searchText = ref("");
	// function openScan() {
	// 	/* #ifdef H5 */
	// 	uni.showToast({
	// 		icon: "none",
	// 		title: "请到安卓设备进行扫码",
	// 	});
	// 	/* #endif */
	// 	// 只允许通过相机扫码
	// 	uni.scanCode({
	// 		scanType: ["barCode", "qrCode"],
	// 		onlyFromCamera: true,
	// 		success: function (res) {
	// 			searchText.value = JSON.stringify(res.result);
	// 			getDeviceInfo(searchText.value);
	// 			console.log("条码类型：" + res.scanType);
	// 			console.log("条码内容：" + res.result);
	// 		},
	// 	});
	// }

	function scanHandle() {
		toScanCode({
			onlyFromCamera: true, // 只允许通过相机扫码
		})
			.then((res) => {
				uni.showToast({
					icon: "success",
					title: "扫码成功",
				});
				searchText.value = res;
				getDeviceInfo(searchText.value);
			})
			.catch((e) => {
				uni.showToast({
					icon: "error",
					title: e,
				});
			});
	}

	// 是否折叠
	const isCollapse = ref(false);
</script>

<style lang="scss" scoped>
	@import "@/static/css/standard_item.scss";

	.handle-ok {
		min-width: 75px;
		color: #19be6b;
	}

	.card {
		background-color: #fff;
		margin: 10px 10px;
		border-radius: 8px;
		padding: 12px 12px;
		transition: all 300ms ease;
		box-shadow: 0 2px 6px rgba(3, 121, 255, 0.05);
	}

	.overhidden {
		overflow: hidden;
	}

	uni-page-body {
		height: 100%;
		background-color: #fbfbff;
	}

	.u-divider {
		margin: 10px 0;
	}

	.baseForm {
		background-color: #fbfbff;
		display: block;
	}

	.title {
		font-size: 16px;
		margin: 6px 0 14px;
		font-weight: bold;

		.u-icon {
			margin-right: 3px;
		}
	}

	.submit_btn {
		margin: 60rpx 20rpx;
		border-radius: 60rpx;
		height: 45px;
		font-size: 16px;
		line-height: 45px;
		box-shadow: 0 1px 10px rgba(3, 121, 255, 0.3);
	}

	.grey_btn {
		margin: 60rpx 20rpx;
		background-color: #fff !important;
		border: 1px solid #999;
		box-shadow: 0 1px 10px rgba(22, 37, 78, 0.08);
		color: #4f4f4f;
	}

	.searchScan {
		display: flex;
		height: 37px;
		padding: 12px 12px 0px;

		:deep(.u-input) {
			border: none;
			background-color: #fff !important;
			box-shadow: 0 1px 8px 0px rgb(19 10 236 / 8%);
		}

		.addBtn1 {
			width: 60px;
			height: 36px;
			margin-left: -3px !important;

			:deep(.u-button__text) {
				font-size: 14px !important;
			}
		}
	}

	:deep(.u-form-item__body) {
		padding: 4px 0 12px;
	}

	:deep(.u-form-item) {
		.u-form-item__body__left__content__label {
			color: #a8b2bb;
			font-size: 14px;
			margin-bottom: 1px;
		}

		.u-form-item__body__left__content__required {
			font-size: 16px;
		}

		// 单选不可编辑样式
		.u-radio {
			.u-radio__icon-wrap--disabled {
				background-color: rgb(255, 255, 255) !important;
			}

			.u-radio__icon-wrap--disabled--checked {
				background-color: rgb(41, 121, 255) !important;
				border-color: rgb(41, 121, 255) !important;

				.u-icon__icon {
					color: #fff !important;
				}
			}

			.u-radio__text {
				color: #16254e !important;
				font-size: 14px !important;
			}
		}

		.u-textarea--disabled {
			background-color: #fff !important;
		}

		.uni-textarea-textarea {
			color: #16254e !important;
		}

		.input-box {
			width: 100%;
			border: 0.5px solid #dadbde !important;
			border-radius: 4px;

			.u-input {
				pointer-events: none;
				height: 34px;
				padding-left: 10px !important;
			}

			image {
				padding: 7px 6px;
				width: 20px;
				height: 20px;
			}
		}
	}

	.submit_btn_div {
		// display: flex;
		// justify-content: space-between;
	}

	.mt-10- {
		margin-top: -30px;
	}
</style>